<template>
  <view>
    <view class="top">
      <view class="have">
        有了
      </view>
      <view class="search">
        <text class="icon-search iconfont"></text>搜索职位、公司
      </view>
      <view class="iconfont icon-gongyi notice">

      </view>
      <view class="pic">
        <image src="../../static/logo.png" mode=""></image>
      </view>
    </view>
    <view class="block">
      <view class="big-item">
        <view class="left">今日热榜</view>
        <view class="right">
          <view class="week">
            {{getDate().week}}
          </view>
          <view class="num">
            {{getDate().day}}
          </view>
        </view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="sm-item iconfont icon-xueli">
        <view>学生圈</view>
      </view>
      <view class="big-item">
        <view class="left">直播招聘<view class="playback">
            往期回放
          </view>
        </view>
        <view class="right iconfont icon-cgz">

        </view>
      </view>
    </view>
    <view class="nav">
      <view v-for="(item,index) in navList" :key="item" :class="{selected:tabIndex===index}" @click="tabIndex=index">
        {{item}}
      </view>
    </view>
    <swiper class="swiper" :current="tabIndex" @change="change" :style="{height:swiperHeight+'px'}">
      <swiper-item class="swiper-item">
        <view class="list0">
          sldkhjlkahs jkhjk
        </view>
      </swiper-item>
      <swiper-item class="recommend swiper-item">
        <view class="list1">
          <view class="item" v-for="item in 10">
            <view class="item-top">
              <view class="user">
                <view class="pic">
                  <image src="../../static/logo.png" mode=""></image>
                </view>
                <view class="info">
                  <view class="name">
                    李老师
                  </view>
                  <view class="position">
                    人事经理·厦门学中企业管理咨询
                  </view>
                </view>
              </view>
              <view class="more">...</view>
            </view>
            <view class="content">
              前两天看到一份工作，薪资待遇听不粗破的双击打开垃圾技术飞洒算法撒大苏打撒
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="answer swiper-item">
        <view class="list2">
          <view class="list-top">

          </view>
          <view class="screen">
            <scroll-view scroll-x="true">
              <view class="screen-list">
                <view class="screen-item">学生互助</view>
                <view class="screen-item">新提问</view>
                <view class="screen-item">同行请教</view>
                <view class="screen-item">学生提问</view>
                <view class="screen-item">Boss提问</view>
                <view class="screen-item">投票</view>
              </view>
            </scroll-view>

            <view class="screen-btn">
              筛选
            </view>
          </view>
          <view class="answers">
            <view class="answer-item" v-for="item in 20">
              <view class="title">
                [西安] 中煤航测值得应届生去吗？
              </view>
              <view class="user">
                <view class="pic">
                  <image src="../../static/logo.png" mode=""></image>
                </view>
                <view class="info">
                  <text class="name">李佳乐</text><text class="msg">人文地理学·22届</text>
                </view>
              </view>
              <view class="footer">
                <view class="already">
                  已经有了 5 人回答<text class="iconfont icon-right"></text>
                </view>
                <view class="write-answer">
                  写回答
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="list3">d</view>
      </swiper-item>
    </swiper>
  </view>

</template>

<script>
  // #ifdef APP-PLUS
  const dom = weex.requireModule('dom');
  // #endif


  // 缓存每页最多
  const MAX_CACHE_DATA = 100;
  // 缓存页签数量
  const MAX_CACHE_PAGE = 3;
  const TAB_PRELOAD_OFFSET = 1;
  export default {
    data() {
      return {
        navList: ["关注", "推荐", "回答交流", "好文", ],
        tabIndex: 2,
        swiperHeight: 0,
      }
    },
    mounted() {
      this.getElementHeight('.list' + this.tabIndex)
    },
    methods: {
      getDate() {
        const now = new Date()
        const day = now.getDate()
        let week = ""
        switch (now.getDay()) {
          case 1:
            week = "周一"
            break
          case 2:
            week = "周二"
            break
          case 3:
            week = "周三"
            break
          case 4:
            week = "周四"
            break
          case 5:
            week = "周五"
            break
          case 6:
            week = "周六"
            break
          case 7:
            week = "周日"
            break
        }
        return {
          week,
          day
        }
      },
      change(e) {
        this.tabIndex = e.detail.current
        this.getElementHeight('.list' + this.tabIndex)
      },
      getElementHeight(element) {
        this.$nextTick(() => {
          let query = uni.createSelectorQuery().in(this);
          query.select(element).boundingClientRect(data => {
            console.log(data.height);
            this.swiperHeight = data.height;
          }).exec()
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: $uni-bg-color-grey;
  }

  .top {
    width: 750rpx;
    height: 110rpx;
    padding-top: 58rpx;
    background: $uni-color-primary;
    position: fixed;
    top: var(--window-top);
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .have {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
    }

    .search {
      width: 380rpx;
      height: 58rpx;
      padding-left: 38rpx;
      background: #5ACDC8;
      opacity: 0.8;
      border-radius: 30rpx;
      color: #Fff;
      line-height: 58rpx;

      .iconfont {
        margin-right: 20rpx;
      }
    }

    .notice {
      font-size: 38rpx;
      color: #Fff;
    }

    .pic {
      width: 46rpx;
      height: 46rpx;
      border-radius: 50%;

      image {
        width: 46rpx;
        height: 46rpx;
        border-radius: 50%;
      }
    }
  }

  .block {
    width: 689rpx;
    padding: 188rpx 26rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    background: #fff;

    .big-item {
      width: 190rpx;
      height: 130rpx;
      margin-bottom: 6rpx;
      margin-right: 6rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;

      .left {
        font-size: 28rpx;
        font-weight: bold;

        .playback {
          font-size: 22rpx;
          color: #666;
        }
      }

      .right {
        width: 54rpx;
        height: 62rpx;
        border: 5rpx solid $uni-color-primary;
        border-radius: 10rpx;
        color: $uni-color-primary;
        text-align: center;

        .week {
          font-size: 16rpx;
          height: 22rpx;
          line-height: 22rpx;
          background: #B1E5E1;
        }
      }
    }

    .big-item:nth-of-type(1) {
      border-radius: 30rpx 0 0 0;
      background: #E2F6F5;
    }

    .big-item:nth-of-type(5) {
      border-radius: 0 0 0 30rpx;
      background: #DDF0FF;
    }

    .sm-item {
      width: 130rpx;
      height: 90rpx;
      background: #E2F6F5;
      margin-right: 6rpx;
      font-size: 60rpx;
      text-align: center;
      padding: 20rpx 0;
      color: $uni-color-primary;

      view {
        font-size: 22rpx;
        color: #000;
      }
    }

    .sm-item:nth-of-type(4) {
      border-radius: 0 30rpx 0 0;
    }
  }

  .nav {
    width: 750rpx;
    position: sticky;
    top: 166rpx;
    display: flex;
    height: 96rpx;
    border-bottom: 1px solid #F3F3F3;
    background: #fff;
    margin-top: 10rpx;
    z-index: 10;

    view {
      height: 90rpx;
      line-height: 90rpx;
      margin-left: 60rpx;
      font-size: 34rpx;
    }

    .selected {
      border-bottom: 4px solid $uni-color-primary;
      font-weight: bold;
      font-size: 36rpx;
    }
  }

  .swiper {
    .recommend {
      .item {
        width: 680rpx;
        padding: 35rpx;
        background: #fff;
        margin-bottom: 10rpx;

        .item-top {
          width: 680rpx;
          height: 78rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .pic {
              width: 68rpx;
              height: 68rpx;
              border-radius: 50%;
              margin-right: 16rpx;

              image {
                width: 68rpx;
                height: 68rpx;
                border-radius: 50%;
              }
            }

            .info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .name {
                font-size: 28rpx;
                font-weight: bold;
              }

              .position {
                font-size: 22rpx;
                color: $uni-text-color-grey;
              }
            }
          }

          .more {
            color: $uni-text-color-grey;
            font-size: 40rpx;
          }
        }
      }

      .content {
        margin-top: 10rpx;
        font-size: 34rpx;
      }
    }

    .answer {
      background: #fff;

      .list-top {
        height: 230rpx;
        width: 680rpx;
        background: #71B719;
        border-radius: 26rpx;
        position: relative;
        margin: 5rpx auto 20rpx;
      }

      .screen {
        width: 680rpx;
        height: 46rpx;
        margin: auto;
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid $uni-bg-color-grey;

        scroll-view {
          width: 560rpx;
          height: 46rpx;

          .screen-list {
            width: 990rpx;
            display: flex;
            flex-wrap: nowrap;

            .screen-item {
              background: #F6F6F6;
              height: 46rpx;
              line-height: 46rpx;
              padding: 0 30rpx;
              margin-right: 20rpx;
              border-radius: 20rpx;
              font-size: 26rpx;
              color: $uni-text-color-grey;
            }
          }
        }

        .screen-btn {
          width: 120rpx;
          height: 46rpx;
          border-left: 1px solid $uni-text-color-grey;
        }

      }

      .answers {
        background: $uni-bg-color-grey;

        .answer-item {
          width: 680rpx;
          padding: 35rpx;
          background: #fff;
          margin-bottom: 10rpx;

          .title {
            font-size: 32rpx;
            font-weight: bold;
          }

          .user {
            display: flex;
            height: 70rpx;
            align-items: center;

            .pic {
              width: 42rpx;
              height: 42rpx;
              border-radius: 50%;
              margin-right: 10rpx;

              image {
                width: 42rpx;
                height: 42rpx;
                border-radius: 50%;
              }
            }

            .info {
              display: flex;
              align-items: center;
              height: 70rpx;

              .name {
                font-size: 24rpx;
                color: $uni-text-color-grey;
                margin-right: 16rpx;
              }

              .msg {
                font-size: 26rpx;
                color: $uni-text-color-grey;
                opacity: .7;
              }
            }
          }

          .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 34rpx;

            .already {
              font-size: 26rpx;
              color: $uni-text-color-grey;
              opacity: .7;

              .iconfont {
                font-size: 26rpx;
                margin-left: 10rpx;
              }
            }

            .write-answer {
              width: 108rpx;
              height: 42rpx;
              font-size: 26rpx;
              text-align: center;
              line-height: 42rpx;
              border-radius: 10rpx;
              color: #fff;
              background: $uni-color-primary;
            }
          }
        }
      }
    }

  }
</style>
